<template>
  <el-form size="mini" inline>
    <el-form-item label="是否初始化">
      <el-select placeholder="请选择" v-model="valA">
        <el-option label="是" :value="1"> </el-option>
        <el-option label="否" :value="2"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="镜像选择">
      <el-select placeholder="请选择" v-model="valB">
        <el-option label="是" :value="1"> </el-option>
        <el-option label="否" :value="2"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="拉取镜像">
      <el-select placeholder="请选择" v-model="valC">
        <el-option label="是" :value="1"> </el-option>
        <el-option label="否" :value="2"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="拉取镜像">
      <el-button type="primary" size="mini" @click="handleClick"
        >选择镜像</el-button
      >
    </el-form-item>
    <h4>容器端口设置</h4>
    <br />
    <section v-for="item in rqDkNums" :key="item">
      <el-form-item label="端口号">
        <el-input v-model="valD"></el-input>
      </el-form-item>
      <el-form-item label="节点端口">
        <el-input v-model="valE"></el-input>
      </el-form-item>
      <el-form-item label="协议">
        <el-select placeholder="请选择" v-model="valF">
          <el-option label="TCP" :value="1"> </el-option>
          <el-option label="IP" :value="2"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="rqDkNums++">
          增加
        </el-button>
        <el-button type="danger" size="mini" @click="rqDkNums--">
          删除
        </el-button>
      </el-form-item>
    </section>
    <h4>环境变量设置</h4>
    <br />
    <section v-for="item in rqBlNums" :key="item">
      <el-form-item>
        <el-select placeholder="请选择" v-model="valG">
          <el-option label="环境变量配置A" :value="1"> </el-option>
          <el-option label="环境变量配置B" :value="2"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="rqBlNums++">
          增加
        </el-button>
        <el-button type="danger" size="mini" @click="rqBlNums--">
          删除
        </el-button>
      </el-form-item>
    </section>
    <h4>启动命令</h4>
    <br />
    <section v-for="item in rqQdNums" :key="item">
      <el-form-item>
        <el-input placeholder="push.sh" v-model="valH"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="rqQdNums++">
          增加
        </el-button>
        <el-button type="danger" size="mini" @click="rqQdNums--">
          删除
        </el-button>
      </el-form-item>
    </section>
    <h4>关闭命令</h4>
    <br />
    <section v-for="item in rqGbNums" :key="item">
      <el-form-item>
        <el-input v-model="valI" placeholder="shoutdown.sh"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="rqGbNums++">
          增加
        </el-button>
        <el-button type="danger" size="mini" @click="rqGbNums--">
          删除
        </el-button>
      </el-form-item>
    </section>
    <h4>存储</h4>
    <br />
    <section v-for="item in rqCcNums" :key="item">
      <el-form-item label="选择">
        <el-select placeholder="请选择" v-model="valJ">
          <el-option label="HostPath" :value="1"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="rqCcNums++">
          增加
        </el-button>
        <el-button type="danger" size="mini" @click="rqCcNums--">
          删除
        </el-button>
      </el-form-item>
      <br />
      <section v-if="valJ">
        <el-form-item label="存储名称">
          <el-input v-model="valK"></el-input>
        </el-form-item>
        <el-form-item label="存储路径">
          <el-input v-model="valL"></el-input>
        </el-form-item>
      </section>
    </section>
    <h4>容器挂载点</h4>
    <br />
    <section>
      <el-form-item label="日志">
        <el-input v-model="valM"></el-input>
      </el-form-item>
      <el-form-item label="路径">
        <el-input v-model="valN"></el-input>
      </el-form-item>
    </section>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      valA: 1,
      valB: '',
      valC: '',
      valD: '',
      valE: '',
      valF: '',
      valG: '',
      valH: '',
      valI: '',
      valJ: '',
      valK: '',
      valL: '',
      valM: '',
      valN: '',
      rqDkNums: 1,
      rqBlNums: 1,
      rqQdNums: 1,
      rqGbNums: 1,
      rqCcNums: 1
    }
  },

  methods: {
    handleClick() {
      this.$emit('selectJx', true)
    }
  }
}
</script>

<style lang="scss" scoped></style>
